/**
 * @description  : 布局-页签组件
 * @descriptionDetail : 布局-页签组件
 * @copyright    : 浙江烟草
 * @author       : zx
 * @create       : 2022-12-05 10:30:56
 */
<template>
  <view class="page">
    <view class="rdcontent">
      <u-form :model="layoutForm" :rules="rules" ref="uForm">
        <u-row gutter="16" align="top" class="divided-line">
          <u-col span="12">
            <u-form-item :label-position="labelPosition" label="经营地址">
              <u-input placeholder="请输入" v-model="basemsg.businessAddr" :disabled="true" />
            </u-form-item>
          </u-col>
          <u-col span="12">
            <u-form-item :label-position="labelPosition" label="店铺招牌">
              <u-input placeholder="请输入" v-model="layoutForm.shopSign" />
            </u-form-item>
          </u-col>
          <u-col span="12">
            <u-form-item :label-position="labelPosition" label="仓库地址" :required="true" prop="storagePlace">
              <u-input placeholder="请输入" v-model="layoutForm.storagePlace" />
            </u-form-item>
          </u-col>
          <u-col span="12">
            <u-form-item :label-position="labelPosition" label="经营面积（平方）" :required="true" prop="bizArea">
              <u-input placeholder="请输入" type="number" v-model="layoutForm.bizArea" />
            </u-form-item>
          </u-col>
          <u-col span="12">
            <u-form-item :label-position="labelPosition" label="地区类别" :required="true" prop="areaType">
              <dic-input :keyWord="$u.dic.DIC_KEYS.AREA_TYPE" :dicCode="layoutForm.areaType" inputAlign="left" type="select" :select-open="
              dicSelectOpen('areaType', $u.dic.DIC_KEYS.AREA_TYPE)
            " placeholder="请选择" v-model="layoutForm.areaTypeName" @changeInputModelData="
              (name) => {
                $set(layoutForm, 'areaTypeName', name);
              }
            " @click="
              showDic(
                $u.dic.DIC_KEYS.AREA_TYPE,
                layoutForm.areaType,
                'areaType'
              )
            " />
            </u-form-item>
          </u-col>
          <u-col span="12">
            <u-form-item label="地缘情况" :required="true" :label-position="labelPosition" prop="areaTypeDetail">
              <dic-input :keyWord="$u.dic.DIC_KEYS.L_AREA_TYPE_DETAIL" :dicCode="layoutForm.areaTypeDetail" inputAlign="left" type="select" :select-open="
              dicSelectOpen('areaTypeDetail', $u.dic.DIC_KEYS.L_AREA_TYPE_DETAIL)
            " placeholder="请选择" v-model="layoutForm.areaTypeDetailName" @changeInputModelData="
              (name) => {
                $set(layoutForm, 'areaTypeDetailName', name);
              }
            " @click="
              showDic(
                $u.dic.DIC_KEYS.L_AREA_TYPE_DETAIL,
                layoutForm.areaTypeDetail,
                'areaTypeDetail'
              )
            " />
            </u-form-item>
          </u-col>
          <u-col span="12">
            <u-form-item :label-position="labelPosition" label="地理环境">
              <dic-input :keyWord="$u.dic.DIC_KEYS.RETAILER_ENV_TYPE" :dicCode="layoutForm.envType" inputAlign="left" type="select" :select-open="
              dicSelectOpen('envType', $u.dic.DIC_KEYS.RETAILER_ENV_TYPE)
            " placeholder="请选择" v-model="layoutForm.envTypeName" @changeInputModelData="
              (name) => {
                $set(layoutForm, 'envTypeName', name);
              }
            " @click="
              showDic(
                $u.dic.DIC_KEYS.RETAILER_ENV_TYPE,
                layoutForm.envType,
                'envType'
              )
            " />
            </u-form-item>
          </u-col>
          <!-- <u-col span="12">
            <u-form-item :label-position="labelPosition" label="商圈情况">
              <u-input placeholder="请输入" v-model="layoutForm.busiType" />
            </u-form-item>
          </u-col> -->
          <u-col span="12">
            <u-col span="12">
              <u-form-item :label-position="labelPosition" label="场地权属" :required="true" prop="groundOwnership">
                <dic-input :keyWord="$u.dic.DIC_KEYS.RETAILER_GROUND_OWNERSHIP" :dicCode="layoutForm.groundOwnership" inputAlign="left" type="select" :select-open="
              dicSelectOpen('groundOwnership', $u.dic.DIC_KEYS.RETAILER_GROUND_OWNERSHIP)
            " placeholder="请选择" v-model="layoutForm.groundOwnershipName" @changeInputModelData="
              (name) => {
                $set(layoutForm, 'groundOwnershipName', name);
              }
            " @click="
              showDic(
                $u.dic.DIC_KEYS.RETAILER_GROUND_OWNERSHIP,
                layoutForm.groundOwnership,
                'groundOwnership'
              )
            " />
              </u-form-item>
            </u-col>
          </u-col>
          <u-col span="12">
            <u-form-item :label-position="labelPosition" label="租赁有效期类型" :required="true" prop="groundOwnershipValidType">
              <dic-input :keyWord="$u.dic.DIC_KEYS.L_BUSINESS_VALID_TYPE" :dicCode="layoutForm.groundOwnershipValidType" inputAlign="left" type="select" :select-open="
              dicSelectOpen('groundOwnershipValidType', $u.dic.DIC_KEYS.L_BUSINESS_VALID_TYPE)
            " placeholder="请选择" v-model="layoutForm.groundOwnershipValidTypeName" @changeInputModelData="
              (name) => {
                $set(layoutForm, 'groundOwnershipValidTypeName', name);
              }
            " @click="
              showDic(
                $u.dic.DIC_KEYS.L_BUSINESS_VALID_TYPE,
                layoutForm.groundOwnershipValidType,
                'groundOwnershipValidType'
              )
            " />
            </u-form-item>
          </u-col>
          <u-col span="12" v-if="layoutForm.groundOwnershipValidType!=='01'">
            <u-form-item :label-position="labelPosition" label="租赁(无偿使用)起" right-icon="arrow-right" ref="endChangeRef">
              <u-input placeholder="租赁(无偿使用)起" :disabled="true" input-align="left" v-model="layoutForm.leaseTimelimitStart" @click="clicDatekHandle('leaseTimelimitStart')" />
            </u-form-item>
          </u-col>
          <u-col span="12" v-if="layoutForm.groundOwnershipValidType!=='01'">
            <u-form-item :label-position="labelPosition" label="租赁(无偿使用)止" right-icon="arrow-right" ref="endChangeRef">
              <u-input placeholder="租赁(无偿使用)止" :disabled="true" input-align="left" v-model="layoutForm.leaseTimelimitEnd" @click="clicDatekHandle('leaseTimelimitEnd')" />
            </u-form-item>
          </u-col>
          <!-- <u-col span="12">
            <u-form-item :label-position="labelPosition" label="仓储地址">
              <u-input placeholder="请输入" v-model="layoutForm.storagePlace" />
            </u-form-item>
          </u-col> -->
          <u-col span="12">
            <u-form-item :label-position="labelPosition" label="行政区划" :required="true" prop="regionalizationName">
              <u-input type="text" placeholder="请选择" :disabled="true" :custom-style="pointerStyle" v-model="layoutForm.regionalizationName" @click="showArea(1)"></u-input>
            </u-form-item>
          </u-col>
          <u-col span="12">
            <u-form-item :label-position="labelPosition" label="经纬度" :required="true" prop="longLat">
              <u-input placeholder="请输入" :disabled="true" v-model="layoutForm.longLat" />
              <u-icon name="map-fill" :color="$theme.u_type_primary" size="44" @click="getLocation()"></u-icon>
            </u-form-item>
          </u-col>
        </u-row>
      </u-form>
      <view class="popup-submit-btns">
        <u-button class="u-btn" type="primary" @click="submitLngLat('01')">保存</u-button>
        <!-- <u-button class="u-btn" type="primary" @click="submitLngLat('02')">提交</u-button> -->
      </view>
    </view>
    <u-calendar :mode="mode" :max-date="yestDate" v-model="leaseTimelimitStart" @change="changeDate('leaseTimelimitStart',$event)">
    </u-calendar>
    <u-calendar :mode="mode" :max-date="yestDate" v-model="leaseTimelimitEnd" @change="changeDate('leaseTimelimitEnd',$event)">
    </u-calendar>
    <dic-choice :keyWord="dicKeyWords" :currentSelect="dicCurrentSelect" v-model="dicShow" @confirm="selectDicConfirm"></dic-choice>
    <!-- 行政区划选择 -->
    <u-popup mode="bottom" height="80%" v-model="areaShow">
      <area-select @choose="nativeNameSelectShowComfir"></area-select>
    </u-popup>
  </view>
</template>

<script>
import { dateUtils } from "@/common/util";
import DicInput from "@/components/dic_input.vue";
import DicChoice from "@/components/dic_choice.vue";
import areaSelect from "@/components/area-select.vue";
// import fsection from "@/components/form-section.vue";
// import { AMapMixin } from "@/common/AMapMixin.js";
import commonService from "@/service/common/common.service";
import certificateService from "@/service/certificate/certificate.service.js";
export default {
  components: {
    // fsection
    DicInput,
    DicChoice,
    areaSelect
  },
  //   mixins: [AMapMixin],
  props: {
    layoutInfo: {
      type: Function,
      default: () => {}
    },
    // longLat: {
    //   type: String,
    //   default: ""
    // }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  data() {
    return {
      title: {
        basemsg: "布局信息"
      },
      basemsg: {},
      markers: [],
      lonLat: "/",
      leaseTime: "/",
      orgName: "",
      layoutForm: {
        longLat: ""
      },
      labelPosition: "top",
      dicShow: false,
      dicCurrentSelect: "",
      dicKeyWords: "",
      mode: "date",
      type: "",
      areaShow: false,
      pointerStyle: {
        marginRight: "5px",
        pointerEvents: "none !important"
      },
      yestDate: this.$u.timeFormat(Date.now()),
      leaseTimelimitStart: false,
      leaseTimelimitEnd: false,
      rules: {
        storagePlace: [
          {
            required: true,
            message: "请输入仓库地址",
            trigger: ["change", "blur"]
          }
        ],
        bizArea: [
          {
            // required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入经营面积"));
              }
              callback(); // 如果验证通过，调用callback函数
            },
            // message: "请输入经营面积",
            trigger: ["change", "blur"]
          }
        ],
        areaType: [
          {
            required: true,
            message: "请选择地区类别",
            trigger: ["change", "blur"]
          }
        ],
        areaTypeDetail: [
          {
            required: true,
            message: "请选择地缘情况",
            trigger: ["change", "blur"]
          }
        ],
        envType: [
          {
            required: true,
            message: "请选择地理环境",
            trigger: ["change", "blur"]
          }
        ],
        groundOwnership: [
          {
            required: true,
            message: "请选择场地权属",
            trigger: ["change", "blur"]
          }
        ],
        groundOwnershipValidType: [
          {
            required: true,
            message: "请选择租赁有效期类型",
            trigger: ["change", "blur"]
          }
        ],
        regionalizationName: [
          {
            required: true,
            message: "请选择行政区划",
            trigger: ["change", "blur"]
          }
        ],
        longLat: [
          {
            required: true,
            message: "请选择经纬度",
            trigger: ["change", "blur"]
          }
        ]
      }
    };
  },
  mounted() {
    this.layoutInfo().then(res => {
      if (res.success) {
        this.basemsg = res.bean.licenseInfoPre;
        console.log(this.basemsg)
        if (!this.$u.test.isEmpty(this.basemsg.longitude)) {
          this.lonLat = this.basemsg.longitude + "," + this.basemsg.latitude;
        }
        if (
          this.basemsg.groundOwnership == "02" ||
          this.basemsg.groundOwnership == "03"
        ) {
          this.leaseTime =
            (this.basemsg.leaseTimelimitStart || "/") +
            "至" +
            (this.basemsg.leaseTimelimitEnd || "/");
        } else {
          this.leaseTime = "/";
        }
        // this.setMapInstance(this.basemsg);
        this.basemsg.regionalization &&
          commonService
            .findBscAreaStreetByAreaUuid({
              areaUuid: this.basemsg.regionalization
            })
            .then(res => {
              if (res.success) {
                let text = "";
                let info = res.bean;
                if (info.provName) {
                  text += info.provName;
                }
                if (info.cityName) {
                  text += "/" + info.cityName;
                }
                if (info.countyName) {
                  text += "/" + info.countyName;
                }
                if (info.townName) {
                  text += "/" + info.townName;
                }
                if (info.villageName) {
                  text += "/" + info.villageName;
                }
                this.orgName = text;
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch(err => {
              console.log(err);
            });
            console.log(this.layoutForm.longitude)
        this.layoutForm = {
          shopSign: this.basemsg.shopSign || "",
          storagePlace: this.basemsg.storagePlace || "",
          bizArea: this.basemsg.bizArea || 0,
          groundOwnership: this.basemsg.groundOwnership || "",
          groundOwnershipValidType:
            this.basemsg.groundOwnershipValidType || '',
          leaseTimelimit: [
            this.basemsg.leaseTimelimitStart,
            this.basemsg.leaseTimelimitEnd
          ],
          areaType: this.basemsg.areaType || '',
          areaTypeDetail: this.basemsg.areaTypeDetail || '',
          envType: this.basemsg.envType || '',
          busiType: this.basemsg.busiType || '',
          regionalization: this.basemsg.regionalization || "",
          regionalizationName: this.basemsg.regionalizationName || "",
          longitude: this.basemsg.longitude ||this.layoutForm.longitude,
          latitude: this.basemsg.latitude || this.layoutForm.latitude,
          longLat: this.layoutForm.longLat||this.basemsg.latitude?`${this.basemsg.longitude},${this.basemsg.latitude}`:'未采集'
        };
        this.$refs.uForm.setRules(this.rules);
      }
    });
  },
  methods: {
    getLocation() {
      this.setRouteParam({ disable: false, step: "start" });
      this.$u.route("pages/commonPage/modifyLocationMap");
      // this.$emit("childvalueChanged");
    },
    showArea(type) {
      this.areaType = type;
      this.areaShow = true;
    },
    nativeNameSelectShowComfir(areas) {
      let str = "";
      if (this.$modal.isMuniCity(areas[0].proCode)) {
        str = [areas[0].admdivName, areas[0].countryName].join("");
      } else {
        str = [
          areas[0].proName,
          areas[0].admdivName,
          areas[0].countryName
        ].join("");
      }
      if (this.areaType == 1) {
        // 籍贯
        this.layoutForm.regionalizationName = str;
        this.layoutForm.regionalization = [
          // areas[0].proCode,
          // areas[0].admdivCode,
          areas[0].countryCode
        ].join(",");
        // this.layoutForm.nativeCityCode = areas[0].admdivCode;
        // this.layoutForm.nativeCountyCode = areas[0].countryCode;
      } else {
        // 经营地址
        this.layoutForm.regionalization = [
          // areas[0].proCode,
          // areas[0].admdivCode,
          areas[0].countryCode
        ].join(",");
        this.layoutForm.regionalizationName = str;
        // this.layoutForm.busiProvCode = areas[0].proCode;
        // this.layoutForm.busiCityCode = areas[0].admdivCode;
        // this.layoutForm.busiCountyCode = areas[0].countryCode;
      }
      this.areaShow = false;
    },
    // 数据字典组件选择事件
    dicSelectOpen: function(keyWord) {
      if (this.dicKeyWords == keyWord && this.dicShow) {
        return true;
      }
      return false;
    },
    showDic: function(key, cur, fileName) {
      // if (!this.state.canEdit) return;
      if (this.dicShow) return;
      this.dicKeyWords = key;
      this.dicCurrentSelect = cur;
      this.dicShow = true;
    },
    selectDicConfirm: function(e) {
      // 类型
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.L_AREA_TYPE_DETAIL) {
        this.layoutForm.areaTypeDetailName = e[0].label;
        this.layoutForm.areaTypeDetail = e[0].extra.bcbCode;
      }
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.AREA_TYPE) {
        this.layoutForm.areaTypeName = e[0].label;
        this.layoutForm.areaType = e[0].extra.bcbCode;
      }
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.RETAILER_ENV_TYPE) {
        this.layoutForm.envTypeName = e[0].label;
        this.layoutForm.envType = e[0].extra.bcbCode;
      }
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.RETAILER_GROUND_OWNERSHIP) {
        this.layoutForm.groundOwnershipName = e[0].label;
        this.layoutForm.groundOwnership = e[0].extra.bcbCode;
      }
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.L_BUSINESS_VALID_TYPE) {
        this.layoutForm.groundOwnershipValidTypeName = e[0].label;
        this.layoutForm.groundOwnershipValidType = e[0].extra.bcbCode;
        if (this.layoutForm.groundOwnershipValidType == "01") {
          this.layoutForm.leaseTimelimit = [];
        }
      }
    },
    clicDatekHandle(type) {
      this[type] = true;
    },
    changeDate(type, e) {
      this.layoutForm[type] = dateUtils.dateFormat(
        "yyyy-MM-dd",
        new Date(e.result)
      );
    },
    submitLngLat() {
      if (
        this.layoutForm.leaseTimelimitStart &&
        this.layoutForm.leaseTimelimitEnd
      ) {
        if (
          new Date(this.layoutForm.leaseTimelimitStart) >
          new Date(this.layoutForm.leaseTimelimitEnd)
        ) {
          return this.$u.toast(
            "租赁(无偿使用)开始日期不能大于租赁(无偿使用)结束日期"
          );
        } else {
          this.layoutForm.leaseTimelimit = [
            this.layoutForm.leaseTimelimitStart,
            this.layoutForm.leaseTimelimitEnd
          ];
        }
      }
      console.log(this.layoutForm);
      this.$refs.uForm.validate(valid => {
        if (valid) {
          certificateService
            .saveOrUpdateRetailList({
              ...this.layoutForm,
              retailerUuid: this.basemsg.retailerUuid
            })
            .then(res => {
              if (res.success) {
                // this.$u.success('采集成功', 200, () => {
                //     that.backPrev({
                //         paramKey: "params",
                //         param: {},
                //     });
                // });
                // this.$u.toast("保存成功");
                this.backPrev({
                  paramKey: "SaveLayoutRefresh",
                  param: {}
                });
              } else {
                this.$u.toast("保存失败");
              }
            });
          // .catch(e => {
          //   this.$u.toast(e);
          // });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./retailItem.scss";
.page {
  padding: 0;
  //   display: flex;
  //   justify-content: center;
}
.popup-submit-btns {
  width: calc(100% - 30px);
  position: fixed;
  bottom: 10rpx;
}
.rdcontent {
  padding-bottom: 100px;
}
</style>
